<template>
  <div class="home">
    <!-- class="swiper-no-swiping" 禁止页面拖拽 -->
    <swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
      <swiper-slide class="swiper-slide slide-one">
        <video src="http://www.king-capital.com/UpLoadFile/Medias/2020/10/20/192857720c6abc805-6.mp4"  class="index_video" autoplay loop muted></video>
        <div class="page" style="text-shadow: 0px 1px 8px rgba(72, 51, 51, 0.74);">
          <h3>胡巴控股集团</h3>
          <p>HOOPA HOLDINGS</p>
        </div>
        <div class="slogan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{gsjj}}</div>
        <div class="mouseRoll">
          <div class="mouse"></div>
          <p class="text">鼠标滚动</p>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide slide-two">
        <!-- 发展历程 -->
        <div class="content-course">
          <div class="page" style="text-shadow: 0px 1px 8px rgba(72, 51, 51, 0.74);">
            <h3>发展历程</h3>
            <p>DEVELOPMENT</p>
            <div class="timeline"></div>
          </div>
          <div class="course-time">
            <swiper :options="swiperOption2" ref="mySwiper">
              <swiper-slide v-for="(item,index) in courseList" :key="index">
                <div class="time-show">
                  <div class="time-show-item" v-for="(courseOne,index) in item" :key="index">
                    <div class="item-top" :class="{'order-top' : index%2===1}"></div>
                    <el-divider>
                      <i class="el-icon-apple"></i>
                    </el-divider>
                    <div class="item-bottom" :class="{'order' : index%2===1}">
                      <div class="item-bottom-content">
                        <p>{{courseOne.n}}</p>
                        <p>{{courseOne.s}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide class="swiper-slide slide-three">
        <div class="page" style="text-shadow: 0px 1px 8px rgba(72, 51, 51, 0.74);">
          <h3>分支机构</h3>
          <p>BRANCH</p>
        </div>
        <div class="branch">
          <span class="title" v-for="(item, index) in fzjg" :key="index" @click="gaibian(index)">{{item.m}}</span>
        </div>
        <div class="jgcontent" v-for="(item, index) in fzjg" :key="index" v-show="ifindex==index">
            <h3>{{item.m}}</h3>
            <div class="nrbox">
              <div class="nr" style="padding-top: 3%;">地址:{{item.d}}</div>
              <div class="nr" style="padding-top: 3%;">电话:{{item.l}}</div>
            </div>
        </div>
      </swiper-slide>
      <!-- 侧边页面数量 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
 
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "HelloWorld",
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      courseList: [], // 处理过的发展历程集合
      fzlist:[], // 发展历程集合
      gsjj: '', // 公司简介
      fzjg: [], // 分支机构
      jgname: [], // 机构名
      swiperOption: {
        notNextTick: true, //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: "vertical", //水平方向移动
        // loop: true, //页面循环滚动
        // grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
        setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
        mousewheel: true, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
        mousewheelControl: true, //同上
        height: window.innerHeight - 60, // 高度设置，占满设备高度
        resistanceRatio: .5, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
        observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
        speed: 1000, // 滑动速度
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        // debugger: true,
        pagination: { // 
            el: '.swiper-pagination',
            clickable: true // 点击是否可点击滚动
          },
        // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        on: {
          // 监听滑动切换事件，返回swiper对象
        //   slideChange: () => {
        //     let swiper = this.$refs.mySwiper.swiper;
        //     //console.log(swiper.activeIndex); //滑动打印当前索引
        //     if (swiper.activeIndex === this.list.length - 1) {
        //       //到最后一个加载更多数据
        //       let newList = [];
        //       let listLength = this.list.length;
        //       for (let i = 0; i < 10; i++) {
        //         newList.push(listLength + i);
        //       }
        //       this.list = this.list.concat(newList);
        //     }
        //   }
        }
      },
      swiperOption2: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      tabPosition: 'left', 
      ifindex:0,
    };
  },
  created() {},
  // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    this.$http
    .all([
      this.$http.get("/data/get",{
        params:{
          view: "系统后台",
          code: "wzxx",
          data: JSON.stringify({fz:1})
        }
      }),
    ])
    .then(
      this.$http.spread((res) => {
        let newres = JSON.parse(res.data.data)
        this.fzlist = newres.fz
        this.gsjj = newres.jj
        this.fzjg = newres.jg
        this.fzjg.forEach(element => {
          this.jgname.push(element.m)
        });
        console.log(this.jgname);
        var groupCount = Math.ceil(this.fzlist.length / 2);
          // window.console.log(groupCount);
          for (let i = 0; i < groupCount; i++) {
            let img2 = [];
            for (let j = 0; j < 2; j++) {
              if (this.fzlist.length - 1 >= i * 2 + j) {
                img2.push(this.fzlist[i * 2 + j]);
              }
            }
            this.courseList.push(img2);
          }
          // window.console.log(this.courseList);
      })
    )
  },
  methods: {
    change(){
      var acc = document.getElementsByClassName("accordion");
      for (var i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.maxHeight){
            panel.style.maxHeight = null;
          } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
          } 
        }
      }
    },
    gaibian(index){
      this.ifindex=index
      console.log(index);
    }
  }
}
</script>
 
<style lang="scss" scoped>
video{
  position: fixed;
  right: 0px;
  bottom: 0px;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  z-index: -1;
  /*加滤镜*/
  /*-webkit-filter: grayscale(100%);*/
  /*filter:grayscale(100%);*/
}
.swiper-slide {
  font-size: 24px;
  // text-align: center;
  // line-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;

  .page {
    text-align: center;
    height: 100px;
    overflow: hidden;
    /deep/h3,
    p {
      padding: 0 20px;
      font-size: 40px;
      font-weight: 400;
      color: #fff;
    }
  }

  .slogan {
    width: 50%;
    margin: 0 auto;
    // text-align: center;
    font-size: 20px;
    color: #fff;
    padding: 30px 0;
  }
}
.order {
  order: -1;
}
.order-top {
  order: 1;
}
.el-divider {
  background-color: #fff;
  height: 3px;
  .el-divider__text {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0px;
    color: #fff;
    border: 3px solid #fff;
  }
}
//发展历程
/deep/.content-course {
  padding: 50px 0;
  .course-time {
    width: 90%;
    height: 400px;
    margin: 20px auto;
    .swiper-container {
      height: 100%;
    }
    .time-show {
      // width: 900px;
      width: 75%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      .time-show-item {
        flex: 1;
        // width: 450px;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .item-top,
        .item-bottom {
          height: 180px;
          font-size: 18px;
        }
        .item-bottom {
          // display: flex;
          // align-content: center;
          .item-bottom-content {
            background-color: rgba(144, 146, 141, 0.548);
            margin: 20px 0;
            // font-size: 10px !important;
            border-radius: 20px;
            p {
              color: #fff;
              text-align: center;
              padding: 15px;
            }
          }
        }
      }
    }
  }
}
.slide-one {
  // background: url(../assets/img/home_top1.jpg) no-repeat center;
  background-size: cover;
}
.slide-two {
  background: url(../assets/img/home_do1.jpg) no-repeat center;
  background-size: cover;
}
.slide-three {
  background: url(../assets/img/home_anli2.jpg) no-repeat center;
  background-size: cover;
}
.order {
  order: -1;
}
.order-img {
  order: 1;
}
// .bm-view { //百度地图
//   width: 60%;
//   height: 75%;
//   margin: 0 auto;
// }
// 分支机构
.branch{
  // overflow: auto;
  display: flex;
  padding: 20px;
  width: 70%;
  // height: 400px;
  // height: 60%;
  font-size: 15px;
  position: relative;
  margin: 0 auto;
  .title{
    // text-shadow: 0px 1px 8px rgba(72, 51, 51, 0.74);
    cursor: pointer;
    flex: 3;
    text-align: center;
    // font-size: 10px;
    color: #fff;
  }
}
.jgcontent{
  margin: 0 auto;
  display: flex;
  width: 55%;
  height: 40%;
  // background-color: #fff;
  justify-content: center;
  // align-content: center;
  h3{
    // display: block;
    margin-top: 60px;
    color:rgb(255, 175, 27);
  }
  .nrbox{
    // width: 100%;
    .nr{
      margin-top: 30px;
      padding: 20px;
      display: block;
      color: rgb(219, 219, 219);
      font-size: 20px;
    }
  }
}
// 鼠标滚动图
@import url(https://fonts.googleapis.com/css?family=Cabin);
.mouseRoll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // height: 100vh;
  // background-color: #222a30;
}

.text {
  margin-top: 25px;
  font-family: "Cabin", sans-serif;
  font-size: 10px;
  letter-spacing: 6px;
  text-indent: 6px;
  color: #ffffff;
  -webkit-animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
          animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
}

.mouse {
  background: #4e5559 linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%);
  position: relative;
  width: 26px;
  height: 44px;
  border-radius: 100px;
  background-size: 100% 200%;
  -webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
          animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
}
.mouse:before, .mouse:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.mouse:before {
  width: 22px;
  height: 41px;
  background-color: #222a30;
  border-radius: 100px;
}
.mouse:after {
  background-color: #ffffff;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  -webkit-animation: trackBallSlide 5s linear infinite;
          animation: trackBallSlide 5s linear infinite;
}

@-webkit-keyframes colorSlide {
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: #4e5559;
  }
  29.99% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  30% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: #4e5559;
  }
  59% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  60% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: #4e5559;
  }
  90%, 100% {
    background-color: #ffffff;
  }
}

@keyframes colorSlide {
  0% {
    background-position: 0% 100%;
  }
  20% {
    background-position: 0% 0%;
  }
  21% {
    background-color: #4e5559;
  }
  29.99% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  30% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  51% {
    background-color: #4e5559;
  }
  59% {
    background-color: #ffffff;
    background-position: 0% 0%;
  }
  60% {
    background-color: #4e5559;
    background-position: 0% 100%;
  }
  80% {
    background-position: 0% 0%;
  }
  81% {
    background-color: #4e5559;
  }
  90%, 100% {
    background-color: #ffffff;
  }
}
@-webkit-keyframes trackBallSlide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  6% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(2.5px);
            transform: scale(0.9) translateY(2.5px);
  }
  14% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(20px);
            transform: scale(0.4) translateY(20px);
  }
  15%, 19% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-10px);
            transform: scale(0.4) translateY(-10px);
  }
  28%, 29.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  36% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(2.5px);
            transform: scale(0.9) translateY(2.5px);
  }
  44% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(20px);
            transform: scale(0.4) translateY(20px);
  }
  45%, 49% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-10px);
            transform: scale(0.4) translateY(-10px);
  }
  58%, 59.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  66% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(2.5px);
            transform: scale(0.9) translateY(2.5px);
  }
  74% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(20px);
            transform: scale(0.4) translateY(20px);
  }
  75%, 79% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-10px);
            transform: scale(0.4) translateY(-10px);
  }
  88%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
}
@keyframes trackBallSlide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  6% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(2.5px);
            transform: scale(0.9) translateY(2.5px);
  }
  14% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(20px);
            transform: scale(0.4) translateY(20px);
  }
  15%, 19% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-10px);
            transform: scale(0.4) translateY(-10px);
  }
  28%, 29.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  30% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  36% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(2.5px);
            transform: scale(0.9) translateY(2.5px);
  }
  44% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(20px);
            transform: scale(0.4) translateY(20px);
  }
  45%, 49% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-10px);
            transform: scale(0.4) translateY(-10px);
  }
  58%, 59.99% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
  66% {
    opacity: 1;
    -webkit-transform: scale(0.9) translateY(2.5px);
            transform: scale(0.9) translateY(2.5px);
  }
  74% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(20px);
            transform: scale(0.4) translateY(20px);
  }
  75%, 79% {
    opacity: 0;
    -webkit-transform: scale(0.4) translateY(-10px);
            transform: scale(0.4) translateY(-10px);
  }
  88%, 100% {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-10px);
            transform: scale(1) translateY(-10px);
  }
}
@-webkit-keyframes nudgeMouse {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes nudgeMouse {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    -webkit-transform: translateY(4px);
            transform: translateY(4px);
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes nudgeText {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes nudgeText {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  60% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  80% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes colorText {
  21% {
    color: #4e5559;
  }
  30% {
    color: #ffffff;
  }
  51% {
    color: #4e5559;
  }
  60% {
    color: #ffffff;
  }
  81% {
    color: #4e5559;
  }
  90% {
    color: #ffffff;
  }
}
@keyframes colorText {
  21% {
    color: #4e5559;
  }
  30% {
    color: #ffffff;
  }
  51% {
    color: #4e5559;
  }
  60% {
    color: #ffffff;
  }
  81% {
    color: #4e5559;
  }
  90% {
    color: #ffffff;
  }
}

</style>